iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0
Vue.js

重新認識 Vue.js系列 第 24

重新認識 Vue.js Day24: Vue-router

  • 分享至 

  • xImage
  •  

今天來稍微介紹一下 Vue-router 這個套件,主要會以 Vue3 的版本為主,畢竟以現在的專案來說,基本上 Vue2 的專案已經建得差不多了,剩下維護的部分很難會碰到需要管 router 的部份,下面先稍微說一下 Vue-router 的基本作用

路由建立

當我們要建立 Vue-router 的時候,我們會新增一個 router 實例

import { createRouter, createWebHashHistory } from 'vue-router';
const root = process.env.VUE_APP_ROOT
let routes = [
    {
        path: `${root}/home`
        name: 'Home',
        component: () => {
            return import("@/pages/home/Home.vue")
        }
    },
]
let router = createRouter({
    routes
})
export default router

並且在 main.js 引用進來

import router from '@/route/index.js'
const app = Vue.createApp({});
app.use(router);
app.mount('#app');

若有將伺服器的重導向轉回 index.html,那麼我們可以將 history 模式打開,在打開之前我們的網址會像是 https://rourDomain/#/home 這個樣子,所有的路由都是建立在 # 號之後,當我們將 # 號去掉,伺服器也將找不到檔案時自動導回 index.html 並且將 router 元件更新成這樣

let router = createRouter({
    history: createWebHashHistory(),
    routes
})

我們的網址就可以比較正常了,像是 https://rourDomain/home

路由守衛

其中除了路由建立,Vue-router 還有一個重要的用途就是路由守衛,可以透過 beforeEach 來將路由更換前做一些檢查

router.beforeEach((to, from, next) => {
    if(權限通過){
        //Vue2 時需要將 next() 寫進來,表示正常導向,但 Vue3 的時候使用 Vue-router 4 不需要寫
    } else if(權限沒通過 && to.path.contain('login')) {
        // next()
    } else {
        next({
            name: "Login"
        })
    }
})

上面這段代碼的用途很單純,若權限通過那麼不採取任何事,若權限沒通過但前往的頁面網址包含 login 那麼也不做任何事,但當權限沒通過想前往其他頁面時就會將頁面直接導向 "Login" 的頁面

在元件中使用 route 操作

我們在 Vue 元件中,可以使用

router.push({
    name: 'Home',
    params: name
})

來將頁面轉換,其中可以像在 login API 成功後,將頁面轉過去,並且攜帶參數,來滿足大部分的使用場景

Vue-router 大致上的用途就像是這樣,其他的內容基本上大同小異,就有用到時再查囉,今天到此結束~


上一篇
重新認識 Vue.js Day23: 會用了,然後呢
下一篇
重新認識 Vue.js Day25: pinia
系列文
重新認識 Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言